<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">电力巡检系统</el-breadcrumb-item>
            <el-breadcrumb-item>线路管理</el-breadcrumb-item>
        </el-breadcrumb>

        <!--卡片区-->
        <el-card>
            <!--搜索区-->
            <el-form>

                <el-row :gutter="10">
                    <div>
                        <el-col :span="2" class="task">线路编号:</el-col>
                        <el-col :span="4">
                            <el-input></el-input>
                        </el-col>
                    </div>

                    <div>
                        <el-col :span="2" class="task">路线状态:</el-col>
                        <el-col :span="4">
                            <el-select v-model="value" placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </div>
                    <div>
                        <el-button type="primary" @click="getList">查询</el-button>
                        <el-button type="primary" class="add" @click="addpathVisible=true">
                            <icon class="el-icon-circle-plus-outline"></icon>
                            添加线路
                        </el-button>
                    </div>
                </el-row>
            </el-form>

            <!--主体区-->
            <el-table :data="way" border stripe>
                <el-table-column label="线路编号" prop="wayId"></el-table-column>
                <el-table-column label="线路名称" prop="wayName"></el-table-column>
                <el-table-column label="起始杆号" prop="poleFirst"></el-table-column>
                <el-table-column label="终止杆号" prop="poleLast"></el-table-column>
                <el-table-column label="塔基数" prop="poleSum"></el-table-column>
                <el-table-column label="运行状态" prop="runState"></el-table-column>
                <el-table-column label="启动状态" prop="wayIsOpen"></el-table-column>
                <el-table-column label="操作" prop="" width="260px">
                    <template>
                        <!-- 停用按钮 -->
                        <el-button type="primary" icon="el-icon-view" size="mini" @click="stopVisible = true">停用
                        </el-button>

                        <!-- 修改按钮 -->
                        <el-button type="primary" icon="el-icon-s-promotion" size="mini"
                                   @click="amendVisible = true">修改
                        </el-button>

                        <!-- 删除按钮 -->
                        <el-button type="warning" icon="el-icon-edit" size="mini" @click="deletewire">删除
                        </el-button>

                    </template>
                </el-table-column>
            </el-table>

            <!--分页区-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[1, 2, 5, 10]"
                    :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"></el-pagination>
        </el-card>

        <!--新增路线-->
        <el-dialog
                title="新增路线"
                :visible.sync="addpathVisible"
                width="50%">
            <!--内容主体区-->
            <el-form :model="addpathForm" :rules="addpathFormRules" ref="addpathFormRef" label-width="70px">
                <el-form-item label="线路编码:" prop="wayId" label-width="100px">
                    <el-input v-model="addpathForm.wayId"></el-input>
                </el-form-item>

                <el-form-item label="线路名称:" prop="wayName" label-width="100px">
                    <el-input v-model="addpathForm.wayName"></el-input>
                </el-form-item>

                <el-form-item label="线路长度:" prop="wayLength" label-width="100px">
                    <el-input v-model="addpathForm.wayLength"></el-input>
                </el-form-item>

                <el-form-item label="回路长度:" prop="loopLength" label-width="100px">
                    <el-input v-model="addpathForm.loopLength"></el-input>
                </el-form-item>

                <el-form-item label="起始杆号:" prop="poleFirst" label-width="100px">
                    <el-input v-model="addpathForm.poleFirst"></el-input>
                </el-form-item>

                <el-form-item label="终止杆号:" prop="poleLast" label-width="100px">
                    <el-input v-model="addpathForm.poleLast"></el-input>
                </el-form-item>

                <el-form-item label="电压等级:" prop="elelevel" label-width="100px">
                    <el-input v-model="addpathForm.elelevel"></el-input>
                </el-form-item>

                <el-form-item label="塔基数:" prop="poleSum" label-width="100px">
                    <el-input v-model="addpathForm.poleSum"></el-input>
                </el-form-item>

                <el-form-item label="备注:" label-width="100px">
                    <el-input type="textarea" :rows="3"></el-input>
                </el-form-item>


            </el-form>
            <!--内容底部区-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addpathVisible = false">取 消</el-button>
                <el-button type="primary" @click="addpath">确 定</el-button>
            </span>
        </el-dialog>

        <!--修改对话框-->
        <el-dialog
                title="制定巡检任务"
                :visible.sync="amendVisible"
                width="50%">
            <!--内容主体区-->
            <el-form :model="amendForm" :rules="amendFormRules" ref="amendFormRef" label-width="70px">
                <el-form-item label="线路编码:" prop="wayId" label-width="100px">
                    <el-input v-model="amendForm.wayId" disabled></el-input>
                </el-form-item>

                <el-form-item label="线路名称:" prop="wayName" label-width="100px">
                    <el-input v-model="amendForm.wayName"></el-input>
                </el-form-item>

                <el-form-item label="起始杆号:" prop="poleFirst" label-width="100px">
                    <el-input v-model="amendForm.poleFirst"></el-input>
                </el-form-item>

                <el-form-item label="终止杆号:" prop="poleLast" label-width="100px">
                    <el-input v-model="amendForm.poleLast"></el-input>
                </el-form-item>

                <el-form-item label="基塔数:" prop="poleSum" label-width="100px">
                    <el-input v-model="amendForm.poleSum"></el-input>
                </el-form-item>

                <el-form-item label="启用状态:" prop="wayIsOpen" label-width="100px">
                    <el-input v-model="amendForm.wayIsOpen"></el-input>
                </el-form-item>

                <el-form-item label="线路长度:" prop="wayLength" label-width="100px">
                    <el-input v-model="amendForm.wayLength"></el-input>
                </el-form-item>
            </el-form>
            <!--内容底部区-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="amendVisible = false">取 消</el-button>
                <el-button type="primary" @click="amend">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import qs from 'qs'

    export default {
        data() {
            return {
                /*获取用户列表的参数对象, 分页*/
                queryInfo: {
                    query: '',
                    // 当前的页数
                    pagenum: 1,
                    // 当前每页显示多少条数据
                    pagesize: 2
                },
                total: 0,

                options: [{
                    value: '1',
                    label: '正常'
                }, {
                    value: '2',
                    label: '检修中'
                }],
                value: '',

                /*新增表单数据*/
                addpathForm:{
                    wayId:'sc-cd-1',
                    wayName:'四川成都1号线',
                    wayLength:'100公里',
                    loopLength:'100公里',
                    poleSum:'1000',
                    poleFirst:'cd-1',
                    poleLast:'cd-1000',
                    wayIsOpen:'启用',
                    elelevel:'1000v'
                },

                addpathVisible: false,

                stopVisible: false,
                amendVisible: false,
                deleteVisible: false,

                /*新增路线验证*/
                addpathFormRules: {
                    wayId: [
                        {required: true, message: '请输入线路编码', trigger: 'blur'}
                    ],
                    wayName: [
                        {required: true, message: '请输入线路名称', trigger: 'blur'}
                    ],
                    wayLength: [
                        {required: true, message: '请输入线路长度', trigger: 'blur'}
                    ],
                    loopLength: [
                        {required: true, message: '请输入回路长度', trigger: 'blur'}
                    ],
                    poleFirst: [
                        {required: true, message: '请输入起始杆号', trigger: 'blur'}
                    ],
                    poleLast: [
                        {required: true, message: '请输入终止杆号', trigger: 'blur'}
                    ],
                    elelevel: [
                        {required: true, message: '请输入电压等级', trigger: 'blur'}
                    ],
                    poleSum: [
                        {required: true, message: '请输入塔基数', trigger: 'blur'}
                    ]
                },


                /*修改表单*/
                amendForm: {
                    wayId: "XW0001",
                    wayName: "西渭线",
                    poleFirst: "XW0010",
                    poleLast: "XW0256",
                    poleSum: "444",
                    wayIsOpen: "停止",
                    wayLength: "20km",
                    id:"2"
                },
                way:[]
            }
        },
        created() {
            this.getList()
        },
        methods: {
            async getList() {
                const {data: res} = await this.axios.post('/way/query',this.queryInfo)
                    this.way = res.data.result
            },

            /*新增*/
            addpath() {
                this.$refs.addpathFormRef.validate(async valid => {
                    let data = qs.stringify(this.addpathForm)
                    if (!valid) return

                    /*发起请求*/
                    const {data: res} = await this.$http.post('/way/add', data)
                    console.log(res)
                    if (res.code !== 200) {
                        this.$message.error('添加线路失败')
                    }
                    this.$message.success('添加线路成功')
                    /*隐藏对话框*/
                    this.addpathVisible = false
                    /*获取列表数据*/
                    this.getList()
                })
            },

            /*修改*/
            amend(){
                this.$refs.amendFormRef.validate(async valid => {
                    if (!valid) return
                    /*发器请求*/
                    let data = qs.stringify(this.amendForm)
                    const {data: res} = await this.$http.post('/way/update',data)

                    console.log(data)
                    if (res.code !== 200) {
                        this.$message.error('修改线路失败')
                    }
                    this.$message.success('修改线路成功')
                    /*隐藏对话框*/
                    this.amendVisible = false
                    /*获取列表数据*/
                    this.getList()
                })
            },

            /*删除*/
            async deletewire(id) {
                // 弹框询问管理员是否删除用户
                const confirmResult = await this.$confirm('此操作将永久删除该线路, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).catch(err => err)
                // 如果用户确认删除，则返回值为字符串confirm
                // 如果用户取消删除，则返回值为字符串cancel
                if (confirmResult !== 'confirm') {
                    return this.$message.info('已经取消了删除')
                }
                const {data: res} = await this.$http.delete('' + id)
                if (res.meta.status !== 200) {
                    return this.$message.error('删除线路失败')
                }
                this.$message.success('删除成功')
                // 刷新列表
                this.getList()
            }
        }
    }
</script>

<style scoped lang="less">
    .task {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .el-row {
        margin-top: 10px;
    }

    .button {
        position: absolute;
        left: 937px;
    }

    .add {
        position: absolute;
        left: 900px;
    }
</style>
